<script setup>
import {ref} from 'vue'
import navBar from './components/navBar.vue'

import { onLoad } from '@dcloudio/uni-app';
import {getHomeBannerAPI,getHomeCategoryAPI,getHomeHotAPI} from '@/services/home.js'

//导入组件
import CategoryItem from './components/homeCategory.vue'
import homeRec from './components/homeRec.vue'
import XtxGuess from '../../components/XtxGuess.vue';


//启动banner
const imageList = ref([])
const getHomeBannerData = async ()=>{
  const res = await getHomeBannerAPI()
  imageList.value = res.result
  // console.log(imageList.value)
}

//启动category
const categoryList = ref([])
const getHomeCategoryData = async ()=>{
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

//启动hotitems
const hotItemList = ref([])
const getHomeHotData = async ()=>{
  const res = await getHomeHotAPI()
  hotItemList.value = res.result
}

onLoad(()=>{
  getHomeBannerData()
  getHomeCategoryData()
  getHomeHotData()
})

</script>


<template>
  <view class="content">
    <navBar></navBar>
    <scroll-view scroll-y class="body">
      <XtxSwiper :list="imageList"></XtxSwiper>
      <CategoryItem :cateList ="categoryList" />
      <homeRec :hotList = "hotItemList"></homeRec>
      <XtxGuess></XtxGuess>
      
    </scroll-view>
  </view>
</template>


<style lang="scss">

.content{
  background: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
  .body{
    flex: 1;
  }
  
}



</style>
